<template>
  <div>
    <van-nav-bar
      :title="msg"
      left-text="返回"
      left-arrow
      @click-left="goBackFn"
    />
    <van-field
      v-model="username"
      clearable
      required
      label="用户名"
      placeholder="请输入用户名"
      :error-message="useErr"
    />
    <van-field
      v-model="password"
      type="password"
      clearable
      required
      label="密码"
      placeholder="请输入密码"
      :error-message="passErr"
    />
    <van-field
      v-model="password2"
      type="password"
      clearable
      required
      label="重复密码"
      placeholder="请再次输入密码"
      :error-message="passErr2"
    />
    <van-field
      v-model="description"
      clearable
      label="个人签名"
      placeholder="请输入个人签名"
    />
    <van-button type="primary" @click="registerBtn">立即注册</van-button>
    <van-button type="primary" @click="regiResetBtn">重置</van-button>
    <footerBar></footerBar>
  </div>
</template>

<script>
import axios from "axios";
import API_LIST from "@/APIList.config";
import footerBar from "./footerBar";

export default {
  name: "register",
  data() {
    return {
      msg: "注册页面",
      username: "",
      password: "",
      password2: "",
      description: "",
      useErr: "",
      passErr: "",
      passErr2: "",
    };
  },
  components: { footerBar },

  methods: {
    goBackFn() {
      this.$router.go(-1);
    },
    registerBtn() {
      this.useErr = "";
      this.passErr = "";
      this.passErr2 = "";
      let _regsObj = {
        username: this.username,
        password: this.password,
        password2: this.password2,
        description: this.description,
      };
      //   console.log(_regsObj);
      if (_regsObj.username === "") {
        this.useErr = "用户名不能为空";
        return false;
      }
      if (_regsObj.password === "") {
        this.passErr = "密码不能为空";
        return false;
      }
      if (_regsObj.password2 === "") {
        this.passErr2 = "重复密码不能为空";
        return false;
      }
      if (_regsObj.password !== _regsObj.password2) {
        this.passErr2 = "重复输入密码不一致";
        return false;
      }

      this.postRegsObj(_regsObj);
    },

    postRegsObj(_regsObj) {
      axios.post(API_LIST.regs_post, _regsObj).then((_d) => {
        this.$dialog
          .alert({
            message: _d.data.regsInfo,
          })
          .then(() => {
            this.$router.push("/");
          });
      });
    },
    regiResetBtn() {},
  },
};
</script>